<template>
  <div>
    <div class="publish-details">
      <!-- 页头 -->
      <div id="head-breadcrumb">
        <div class="breadcrumbs">
          <ul class="breadcrumb container">
            <li class="breadcrumb-item"><a href="#">图书</a></li>
            <li class="breadcrumb-item"><a href="#">出版</a></li>
            <li class="breadcrumb-item active" aria-current="page">
              自然灾害与防灾应急避险实用百科
            </li>
          </ul>
        </div>
      </div>
      <!-- 详情主体 -->
      <div class="main">
        <div class="container justify-content-between d-flex">
          <!-- 左边书籍详情 -->
          <div class="left-book-details">
            <!-- 出版详情介绍 -->
            <div class="article-profile-section justify-content-between d-flex">
              <div class="details-book-pic">
                <img :src="img1" alt="" />
              </div>
              <div class="article-profile-primary">
                <h1 class="article-title">自然灾害与防灾应急避险实用百科</h1>
                <p class="subtitle">彩绘图解版</p>
                <p class="author">
                  <span class="label">作者</span>
                  <a href="#" class="author-item">科普图鉴编辑部</a>
                </p>
                <p class="category">
                  <span class="label">类别</span>
                  <span>出版 / 非虚构</span>
                </p>
                <p>
                  <span class="label">出版社</span>
                  <span>人民邮电出版社&nbsp;/&nbsp;</span>
                  <span>2016-01</span>
                </p>
                <p>
                  <span class="label">提供方</span>
                  <a href="">人民邮电出版社</a>
                </p>
                <p>
                  <span class="label">字数</span>
                  <span class="labeld-text">约 182,000字</span>
                </p>
                <p>
                  <span class="label">ISBN</span>
                  <span>9787115401182</span>
                </p>
                <div class="rating d-flex">
                  <span class="star-context">
                    <img :src="img2" alt="" />
                    <img :src="img2" alt="" />
                    <img :src="img2" alt="" />
                    <img :src="img2" alt="" />
                    <img :src="img2" alt="" />
                  </span>
                  <span class="no-rating">暂无评价</span>
                  <span class="icon-help">
                    <img :src="img3" alt="" />
                  </span>
                </div>
                <div class="profile-reading-actions">
                  <a href="" class="membership-link">
                    <img :src="img18" alt="" class="icon-vip" />
                    <span class="promotion-text"
                      >开通会员，可免费在线阅读本书，首月特惠</span
                    >
                    <img :src="img19" alt="" class="icon-inter" />
                  </a>
                  <div class="all-btn">
                    <a href="" class="btn-left">
                      <button class="btn-read">免费试读</button>
                    </a>
                    <a href="" class="btn-right">
                      <button class="btn-bookshelf">
                        <img :src="img20" alt="" />
                        <span>加入书架</span>
                      </button>
                      <button class="btn-share">分享</button>
                      <button class="btn-more">
                        <img :src="img21" alt="" />
                      </button>
                      <!-- 隐藏分享部分 -->
                      <div class="share-more d-flex">

                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- 作品简介 -->
            <section class="article-profile-intro">
              <h3>作品简介</h3>
              <p>
                &nbsp;&nbsp;
                《自然灾害与防灾应急避险实用百科（彩绘图解版）》共分8章，详细介绍了地震、风灾、海啸、洪水、滑坡和崩塌、火灾、泥石流以及雪暴8种自然灾害的特点、形成原因、对人类及社会的危害、预防的方法和灾害来临时的自救和互救方法等内容。
                《自然灾害与防灾应急避险实用百科（彩绘图解版）》结构清晰、语言简练、趣味性强，可供社会各界人士参考阅读。
              </p>
              <a href="javascript:void(0)" class="btn-zk btn-introduce active" @click="introduce">展开全部
                <img :src="img21" alt="" class="img-zk"/>
              </a>
              <a href="javascript:void(0)" class="btn-sq btn-introduce" @click="introduce">收起
                <img :src="img21" alt="" class="img-sq"/>
              </a>
            </section>
            <!-- 作品目录 -->
            <section class="article-profile-catalog">
              <div class="hd">
                <h3>作品目录</h3>
              </div>
              <div
                class="db-catalog collapse-content"
                data-max-lines="5"
                data-line-hight="30"
              >
                <ul>
                  <li class="story-item level-0">
                    <h5 class="story-title">
                      <a href="#">前言</a>
                    </h5>
                  </li>
                  <li class="story-item level-0">
                    <h5 class="story-title">
                      <a href="#">第一章 地震灾害及应急百科知识</a>
                    </h5>
                  </li>
                  <li class="story-item level-1">
                    <h5 class="story-title">
                      <a href="#">第一节 认识地震</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">一、 地震概述</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">二、 地震带</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">三、 关于地震的几个疑问</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">四、 中国地震</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">五、 地震的直接灾害和次生灾害</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">六、 地震仪是如何记录地震的</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">七、 影响地震灾害大小的因素</a>
                    </h5>
                  </li>
                  <li class="story-item level-2">
                    <h5 class="story-title">
                      <a href="#">八、 地震波的应用</a>
                    </h5>
                  </li>
                </ul>
              </div>
              <a href="javascript:void(0)" class="btn-zk btn-catalog active" @click="catalog">展开全部
                <img :src="img21" alt="" class="img-zk"/>
              </a>
              <a href="javascript:void(0)" class="btn-sq btn-catalog" @click="catalog">收起
                <img :src="img21" alt="" class="img-sq"/>
              </a>
            </section>
            <!-- 评论区 -->
            <div class="maixed-comment-list">
              <div class="comment-list">
                <!-- 标题 -->
                <div class="title d-flex">
                  <h3>评论</h3>
                  <span>4</span>
                </div>
                <!-- 第一条评论 -->
                <div class="comment-item d-flex">
                  <div class="user-picture">
                    <img :src="img5" alt="" />
                  </div>
                  <div class="comment-inner">
                    <div class="comment-user-info">
                      <div class="user-name">
                        <a href="#" class="uname">潜水的Yiu</a>
                        <img :src="img4" alt="" />
                      </div>
                      <div class="comment-time-works">
                        <span class="time">07-24</span>
                        <span>发表书评</span>
                      </div>
                    </div>
                    <div class="comment-content">
                      <p>防患于未然</p>
                    </div>
                    <div class="comment-button">
                      <a href="#" class="good">
                        <span class="literal">赞</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="reply">
                        <span class="literal">回复</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="comment-share">
                        <span class="literal">分享</span>
                        <img :src="img9" alt="" />
                      </a>
                    </div>
                  </div>
                </div>
                <!-- 第二条评论 -->
                <div class="comment-item d-flex">
                  <div class="user-picture">
                    <img :src="img6" alt="" />
                  </div>
                  <div class="comment-inner">
                    <div class="comment-user-info">
                      <div class="user-name">
                        <a href="#" class="uname">你又在摸鱼了</a>
                        <img :src="img4" alt="" />
                      </div>
                      <div class="comment-time-works">
                        <span class="time">07-23</span>
                        <span>发表书评</span>
                      </div>
                    </div>
                    <div class="comment-content">
                      <p>hmmm这么看挺有道理</p>
                    </div>
                    <div class="comment-button">
                      <a href="#" class="good">
                        <span class="literal">赞</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="reply">
                        <span class="literal">回复</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="comment-share">
                        <span class="literal">分享</span>
                        <img :src="img9" alt="" />
                      </a>
                    </div>
                  </div>
                </div>
                <!-- 第三条评论 -->
                <div class="comment-item d-flex">
                  <div class="user-picture">
                    <img :src="img7" alt="" />
                  </div>
                  <div class="comment-inner">
                    <div class="comment-user-info">
                      <div class="user-name">
                        <a href="#" class="uname">读书使人富有</a>
                        <img :src="img4" alt="" />
                      </div>
                      <div class="comment-time-works">
                        <span class="time">07-14</span>
                        <span>发表书评</span>
                      </div>
                    </div>
                    <div class="comment-content">
                      <p>只能靠我家俩猫了</p>
                    </div>
                    <div class="comment-button">
                      <a href="#" class="good">
                        <span class="literal">赞</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="reply">
                        <span class="literal">回复</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="comment-share">
                        <span class="literal">分享</span>
                        <img :src="img9" alt="" />
                      </a>
                    </div>
                  </div>
                </div>
                <!-- 第四条评论 -->
                <div class="comment-item d-flex">
                  <div class="user-picture">
                    <img :src="img8" alt="" />
                  </div>
                  <div class="comment-inner">
                    <div class="comment-user-info">
                      <div class="user-name">
                        <a href="#" class="uname">书中自有颜如玉</a>
                        <img :src="img4" alt="" />
                      </div>
                      <div class="comment-time-works">
                        <span class="time">07-06</span>
                        <span>发表书评</span>
                      </div>
                    </div>
                    <div class="comment-content">
                      <p>没想到</p>
                    </div>
                    <div class="comment-button">
                      <a href="#" class="good">
                        <span class="literal">赞</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="reply">
                        <span class="literal">回复</span>
                        <span class="count">0</span>
                      </a>
                      <a href="#" class="comment-share">
                        <span class="literal">分享</span>
                        <img :src="img9" alt="" />
                      </a>
                    </div>
                  </div>
                </div>
                <!-- 更多评论 -->
                <a href="" class="link-more">更多评论 4</a>
              </div>
            </div>
            <!-- 相关推荐 -->
            <div class="about-recommend-books">
              <h2>喜欢「自然灾害与防灾应急避险实用百科」的人也喜欢</h2>
              <div class="recommend-books d-flex">
                <div class="book-item">
                  <div class="book-pic">
                    <a href="#">
                      <img :src="img10" alt="" />
                    </a>
                  </div>
                  <div class="book-info">
                    <h4 class="title">
                      <a href="#">天文大百科：彩绘图解版</a>
                    </h4>
                    <div class="author">
                      <span>科普图鉴编辑部</span>
                    </div>
                    <div class="price">19.92元</div>
                  </div>
                </div>
                <div class="book-item">
                  <div class="book-pic">
                    <a href="#">
                      <img :src="img11" alt="" />
                    </a>
                  </div>
                  <div class="book-info">
                    <h4 class="title">
                      <a href="#">万用表使用从入门到精通（第2版）</a>
                    </h4>
                    <div class="author">
                      <span>孙立群</span>
                    </div>
                    <div class="price">16.80元</div>
                  </div>
                </div>
                <div class="book-item">
                  <div class="book-pic">
                    <a href="#">
                      <img :src="img12" alt="" />
                    </a>
                  </div>
                  <div class="book-info">
                    <h4 class="title">
                      <a href="#">汽车发动机结构及维修</a>
                    </h4>
                    <div class="author">
                      <span>邓长勇 等</span>
                    </div>
                    <div class="price">12.00元</div>
                  </div>
                </div>
                <div class="book-item">
                  <div class="book-pic">
                    <a href="#">
                      <img :src="img13" alt="" />
                    </a>
                  </div>
                  <div class="book-info">
                    <h4 class="title">
                      <a href="#">中国旅游地理</a>
                    </h4>
                    <div class="author">
                      <span>徐永红</span>
                    </div>
                    <div class="price">14.90元</div>
                  </div>
                </div>
                <div class="book-item">
                  <div class="book-pic">
                    <a href="#">
                      <img :src="img14" alt="" />
                    </a>
                  </div>
                  <div class="book-info">
                    <h4 class="title">
                      <a href="#">电磁的秘密</a>
                    </h4>
                    <div class="author">
                      <span>《指尖上的探索》编委会</span>
                    </div>
                    <div class="price">1.09元</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右边出版方 -->
          <div class="right-publisher">
            <!-- 出版详情 -->
            <div class="publisher-intro">
              <section class="publish-info">
                <h3>出版方</h3>
                <div class="author-info">
                  <a href="#">
                    <img :src="img15" alt="" />
                    <span class="name">人民邮电出版社</span>
                  </a>
                  <p class="intro">
                    致力于通信、计算机、电子技术、教材、少儿、经管、摄影、集邮、旅游、心理学等领域的专业图书出版
                  </p>
                </div>
              </section>
              <div class="author-other-works">
                <div class="title">全部作品（<a>3167</a>）</div>
                <ul class="work-list">
                  <li>
                    <a href="#">她世界</a>
                  </li>
                  <li>
                    <a href="#">疗愈你的内在小孩</a>
                  </li>
                  <li>
                    <a href="#">麦肯锡结构化战略思维</a>
                  </li>
                  <li>
                    <a href="#">新媒体写作</a>
                  </li>
                  <li>
                    <a href="#">人才测评：识别高潜人才，提升用人效能</a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 商品广告 -->
            <div class="commodity-adv">advertisement</div>
            <!-- 下载豆瓣阅读app -->
            <div class="download-section">
              <h3>下载豆瓣阅读App</h3>
              <a href="" class="app-qr-code justify-content-between d-flex">
                <div class="download-info">
                  <div class="logo">
                    <img :src="img16" alt="" />
                  </div>
                  <div class="name">豆瓣阅读 App 5.0</div>
                  <div class="app-text">iOS / Android</div>
                </div>
                <div class="app-download-qr-code">
                  <img :src="img17" alt="" />
                </div>
              </a>
            </div>
            <!-- 作品标签 -->
            <div class="books-tag">
              <h3>作品标签</h3>
              <button>急救2</button>
              <button>自然灾害2</button>
              <button>灾害预防1</button>
              <button>灾害预防1</button>
              <button>灾害预防1</button>
              <button>灾害预防1</button>
            </div>
            <!-- 读者动态 -->
            <div class="reader-dynamic">
              <h3>读者动态</h3>
              <!-- 第一位读者 -->
              <div class="reader-action d-flex">
                <div class="image">
                  <img :src="img22" alt="" />
                </div>
                <div class="action">
                  <a href="">理想人</a>
                  <div class="action-msg">
                    <span>7 分钟前 购买</span>
                  </div>
                </div>
              </div>
              <!-- 第二位读者 -->
              <div class="reader-action d-flex">
                <div class="image">
                  <img :src="img23" alt="" />
                </div>
                <div class="action">
                  <a href="">理想人</a>
                  <div class="action-msg">
                    <span>7 分钟前 购买</span>
                  </div>
                </div>
              </div>
              <!-- 第三位读者 -->
              <div class="reader-action d-flex">
                <div class="image">
                  <img :src="img24" alt="" />
                </div>
                <div class="action">
                  <a href="">理想人</a>
                  <div class="action-msg">
                    <span>7 分钟前 购买</span>
                  </div>
                </div>
              </div>
              <!-- 第四位读者 -->
              <div class="reader-action d-flex">
                <div class="image">
                  <img :src="img25" alt="" />
                </div>
                <div class="action">
                  <a href="">理想人</a>
                  <div class="action-msg">
                    <span>7 分钟前 购买</span>
                  </div>
                </div>
              </div>
              <!-- 第五位读者 -->
              <div class="reader-action d-flex">
                <div class="image">
                  <img :src="img26" alt="" />
                </div>
                <div class="action">
                  <a href="">理想人</a>
                  <div class="action-msg">
                    <span>7 分钟前 购买</span>
                  </div>
                </div>
              </div>
              <!-- 第六位读者 -->
              <div class="reader-action d-flex">
                <div class="image">
                  <img :src="img27" alt="" />
                </div>
                <div class="action">
                  <a href="">理想人</a>
                  <div class="action-msg">
                    <span>7 分钟前 购买</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img1: "/image/24113003.jpg",
      img2: "/image/recomend/star.png",
      img3: "/image/recomend/icon-help.png",
      img4: "/image/headpic/icon-vip-16.png",
      img5: "/image/headpic/head1.jpg",
      img6: "/image/headpic/head2.jpg",
      img7: "/image/headpic/head3.jpg",
      img8: "/image/headpic/head4.jpg",
      img9: "/image/down-arrow.png",
      img10: "/image/rebooks/rebook1.jpg",
      img11: "/image/rebooks/rebook1.jpg",
      img12: "/image/rebooks/rebook1.jpg",
      img13: "/image/rebooks/rebook1.jpg",
      img14: "/image/rebooks/rebook1.jpg",
      img15: "/image/recomend/0c7042c576fa846.jpg",
      img16: "/image/recomend/app-icon@2x.png",
      img17: "/image/recomend/qr-download.png",
      img18: "/image/icon-vip.svg",
      img19: "/image/icon-arrow-right-blueblack.svg",
      img20: "/image/recomend/bookshelf.png",
      img21: "/image/down-arrow.png",
      img22: "/image/headpic/head5.jpg",
      img23: "/image/headpic/head6.jpg",
      img24: "/image/headpic/head7.jpg",
      img25: "/image/headpic/head8.jpg",
      img26: "/image/headpic/head9.jpg",
      img27: "/image/headpic/head10.jpg",
    };
  },
  methods:{
    introduce(){
      let btn = document.getElementsByClassName("btn-introduce");
      let p = document.getElementsByClassName("article-profile-intro")[0].children;
      for(let i = 0; i < btn.length; i++){
        if(btn[i].className.indexOf("active") != -1){
          if(btn[i].className.indexOf("btn-zk") != -1){
            btn[i].className = "btn-introduce btn-zk";
            btn[1-i].className = "btn-introduce btn-sq active";
            p[1].style.height= "100%";
            break;
          }else{
            btn[i].className = "btn-introduce btn-sq";
            btn[1-i].className = "btn-introduce btn-zk active";
            p[1].style.height= "72px";
            break;
          }
        }
      }
    },
    catalog(){
      let btn = document.getElementsByClassName("btn-catalog");
      let ul = document.getElementsByClassName("db-catalog collapse-content")[0].children;
      for(let i = 0; i < btn.length; i++){
        if(btn[i].className.indexOf("active") != -1){
          if(btn[i].className.indexOf("btn-zk") != -1){
            btn[i].className = "btn-catalog btn-zk";
            btn[1-i].className = "btn-catalog btn-sq active";
            ul[0].style.height= "100%";
            break;
          }else{
            btn[i].className = "btn-catalog btn-sq";
            btn[1-i].className = "btn-catalog btn-zk active";
            ul[0].style.height= "160px";
            break;
          }
        }
      }    
    }
  }
};
</script>

<style scoped>
.publish-details {
  background-color: #f8f9f9;
}
.publish-details .breadcrumbs {
  width: 100%;
  background-color: #eff2f3;
  margin: 0 0 35px;
}
.publish-details .breadcrumbs .container {
  background-color: #eff2f3;
}
.publish-details .breadcrumbs .container .breadcrumb-item {
  font-size: 12px;
}
.publish-details .breadcrumbs .container .breadcrumb-item a {
  list-style: none;
  text-decoration: none;
  color: #333333;
}
.publish-details
  .breadcrumbs
  .container
  .breadcrumb-item
  + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #333333;
  content: ">";
}
.publish-details .main .container {
  width: 936px;
  margin: 0 auto;
}
.publish-details .main .container .left-book-details {
  text-align: left;
  width: 600px;
  margin-right: 70px;
}
.publish-details .main .container .left-book-details .article-profile-section {
  padding: 0 0 24px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .details-book-pic
  img {
  width: 140px;
  height: 209px;
  margin-right: 20px;
  border-radius: 5px;
  opacity: 1;
  transition: opacity 0.5s ease-in;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary {
  width: 440px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  h1 {
  color: #333333;
  font-size: 20px;
  font-weight: 800;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .subtitle {
  color: #333333;
  font-size: 14px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  p {
  margin: 0;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  p
  span {
  font-size: 12px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  p
  .label {
  color: #666666;
  margin: 0 5px 0 0;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  p
  a {
  text-decoration: none;
  color: #389eac;
  font-size: 12px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .rating {
  margin-top: 11px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .rating
  .star-context {
  width: 73px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .rating
  .star-context
  img {
  width: 11px;
  height: 12px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .rating
  .no-rating {
  color: #a6a6a6;
  font-size: 12px;
  margin: 5px 0 0 7px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .rating
  .icon-help
  img {
  width: 13px;
  height: 13px;
  margin-left: 3px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions {
  margin-top: 20px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .membership-link {
  text-decoration: none;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .membership-link
  .icon-vip {
  width: 20px;
  height: 15px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .membership-link
  span {
  color: #333333;
  font-size: 12px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .membership-link
  .icon-inter {
  width: 6px;
  height: 11px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn {
  margin-top: 20px;
  /* position: relative; */
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-left {
  text-decoration: none;
  padding: 20px 0 0;
  /* position: relative; */
  }
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-left
  .btn-read {
  width: 132px;
  height: 35px;
  color: #ffffff;
  font-size: 15px;
  background-color: #5dcaad;
  border: none;
  border-radius: 4px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-left
  .btn-read:hover{
  content: "";
  /* position: absolute; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 132px;
  height: 35px;
  cursor: pointer;
  background-color: #04a39b;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-right {
  text-decoration: none;
  margin-left: 80px;
  /* position: absolute; */
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-right
  button {
  height: 35px;
  font-size: 13px;
  color: #333333;
  background-color: white;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  box-shadow: 2px 2px 2px #eee;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-right
  .btn-bookshelf {
  width: 110px;
  padding: 0 12px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-right
  .btn-bookshelf
  img {
  width: 19px;
  height: 19px;
  margin-right: 8px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-right
  .btn-share {
  width: 50px;
  padding: 0 12px;
  margin-right: 1px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-right
  .btn-more {
  width: 30px;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-section
  .article-profile-primary
  .profile-reading-actions
  .all-btn
  .btn-right
  .btn-more
  img {
  width: 20px;
  height: 15px;
}
.publish-details .main .container .left-book-details .article-profile-intro {
  color: #333333;
  margin: 36px 0 20px;
}
.publish-details .main .container .left-book-details .article-profile-intro h3 {
  font-size: 18px;
  font-weight: 800;
}
.publish-details .main .container .left-book-details .article-profile-intro p {
  width: 600px;
  height: 72px;
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
}

.publish-details .main .container .left-book-details .article-profile-intro .active
{
  display:inline;
}

.publish-details .main .container .left-book-details .article-profile-intro a {
  width: 79px;
  height: 20px;
  font-size: 12px;
  color: #333333;
  padding: 4px 8px;
  margin-right: 5px;
  text-decoration: none;
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 2px 2px #eee;
  display:none;
}
.publish-details .main .container .left-book-details .article-profile-intro a:hover{
  background-color: #389eac;
  color: #ffffff;
}

.publish-details .main .container .left-book-details .article-profile-intro a img{
  width: 20px;
  height: 15px;
}
.publish-details .main .container .left-book-details .article-profile-intro a .img-sq{
  transform: scaleY(-1);
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog
  .hd
  h3 {
  color: #333333;
  font-size: 18px;
  font-weight: 600;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog
  .db-catalog
  ul {
  height: 160px;
  overflow: hidden;
  list-style: none;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog
  .db-catalog
  ul
  li
  h5
  a {
  text-decoration: none;
  font-size: 14px;
  color: #333333;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog
  .btn-zk, .publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog .btn-sq {
  width: 79px;
  height: 20px;
  font-size: 12px;
  color: #333333;
  padding: 4px 8px;
  margin-right: 5px;
  text-decoration: none;
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 2px 2px #eee;
  display:none;
}

.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog .active{
  display:inline;
}
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog
  .btn-catalog:hover{
    background-color: #389eac;
    color: #ffffff;
  }
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog
  a img{
    width: 20px;
    height: 15px;
  }
.publish-details
  .main
  .container
  .left-book-details
  .article-profile-catalog
  a .img-sq{
    transform: scaleY(-1);
  }  
.publish-details .main .container .left-book-details .maixed-comment-list {
  margin: 36px 0 20px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .title {
  height: 27px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .title
  h3 {
  color: #333333;
  font-size: 18px;
  font-weight: 800;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .title
  span {
  color: #a6a6a6;
  font-size: 14px;
  height: 16px;
  margin-left: 5px;
  font-weight: 600;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item {
  margin-top: 17px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .user-picture
  img {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  border-radius: 40px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner {
  width: 560px;
  padding: 10px 12px;
  border-bottom: 1px solid #ebebeb;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-user-info {
  height: 37px;
  margin-bottom: 16px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-user-info
  .user-name {
  height: 22px;
  margin-bottom: 3px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-user-info
  .user-name
  .uname {
  color: #333333;
  font-size: 13px;
  font-weight: bold;
  margin-right: 5px;
  text-decoration: none;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-user-info
  .user-name
  img {
  width: 22px;
  height: 22px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-user-info
  .comment-time-works {
  line-height: 12px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-user-info
  .comment-time-works
  span {
  color: #a6a6a6;
  font-size: 12px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-user-info
  .comment-time-works
  .time {
  margin-right: 5px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-content
  p {
  height: 23px;
  color: #333333;
  font-size: 13px;
  margin-bottom: 10px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-button {
  float: right;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-button
  a {
  padding: 5px 14px;
  background-color: #ffffff;
  text-decoration: none;
  box-shadow: 2px 2px 2px #eee;
  margin-left: 5px;
  border-radius: 4px;
  color: #333333;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-button
  a
  .literal {
  font-size: 13px;
  margin-right: 4px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-button
  a
  .count {
  font-size: 13px;
  color: #a6a6a6;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-button
  a
  img {
  width: 12px;
  height: 10px;
}
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .comment-item
  .comment-inner
  .comment-button
  a:hover{
    background-color: #389eac;
    color: #ffffff;
  }
.publish-details
  .main
  .container
  .left-book-details
  .maixed-comment-list
  .comment-list
  .link-more {
  text-decoration: none;
  float: right;
  font-size: 12px;
  color: #389eac;
  margin: 10px 0;
}
.publish-details .main .container .left-book-details .about-recommend-books {
  width: 643px;
  margin: 36px 0 20px;
}
.publish-details .main .container .left-book-details .about-recommend-books h2 {
  color: #333333;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 5px;
}
.publish-details
  .main
  .container
  .left-book-details
  .about-recommend-books
  .recommend-books
  .book-item {
  height: 223px;
  margin-top: 20px;
}
.publish-details
  .main
  .container
  .left-book-details
  .about-recommend-books
  .recommend-books
  .book-item
  .book-pic
  a
  img {
  width: 90px;
  height: 134px;
  border-radius: 4px;
  box-shadow: 1px 2px 2px #a6a6a6;
}
.publish-details
  .main
  .container
  .left-book-details
  .about-recommend-books
  .recommend-books
  .book-item
  .book-info {
  width: 90px;
  margin: 17px 36px 0 1px;
}
.publish-details
  .main
  .container
  .left-book-details
  .about-recommend-books
  .recommend-books
  .book-item
  .book-info
  .title {
  margin: 5px 0 0;
}
.publish-details
  .main
  .container
  .left-book-details
  .about-recommend-books
  .recommend-books
  .book-item
  .book-info
  .title
  a {
  display: block;
  line-height: 17px;
  text-decoration: none;
  color: #333333;
  font-size: 13px;
  font-weight: bold;
}
.publish-details
  .main
  .container
  .left-book-details
  .about-recommend-books
  .recommend-books
  .book-item
  .book-info
  .author
  span {
  color: #777777;
  font-size: 12px;
  margin-right: 5px;
}
.publish-details
  .main
  .container
  .left-book-details
  .about-recommend-books
  .recommend-books
  .book-item
  .book-info
  .price {
  color: #777777;
  font-size: 12px;
}
.publish-details .main .container .right-publisher {
  text-align: left;
  width: 264px;
  color: #333333;
}
.publish-details .main .container .right-publisher .publisher-intro {
  height: 318px;
  margin-bottom: 15px;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .publish-info
  h3 {
  font-size: 16px;
  font-weight: 600;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .publish-info
  .author-info
  a {
  text-decoration: none;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .publish-info
  .author-info
  a img{
      margin-right: 10px;
  }
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .publish-info
  .author-info
  a
  .name {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .publish-info
  .author-info
  p {
  font-size: 12px;
  margin-top: 10px;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .author-other-works {
  color: #333333;
  font-size: 12px;
  height: 142px;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .author-other-works
  .title {
  margin-bottom: 10px;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .author-other-works
  .title
  a {
  color: #389eac;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .author-other-works
  .work-list {
  list-style-type: none;
  padding: 0 0;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .author-other-works
  .work-list
  li {
  margin-bottom: 6px;
}
.publish-details
  .main
  .container
  .right-publisher
  .publisher-intro
  .author-other-works
  .work-list
  li
  a {
  text-decoration: none;
  color: #333333;
}
.publish-details .main .container .right-publisher .commodity-adv {
  width: 250px;
  height: 250px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
  text-align: center;
  line-height: 250px;
}
.publish-details .main .container .right-publisher .download-section {
  margin-bottom: 30px;
}
.publish-details .main .container .right-publisher .download-section h3 {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}
.publish-details
  .main
  .container
  .right-publisher
  .download-section
  .app-qr-code {
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 17px 12px;
  margin-top: 15px;
}
.publish-details
  .main
  .container
  .right-publisher
  .download-section
  .app-qr-code
  .download-info
  .logo
  img {
  width: 50px;
  height: 50px;
}
.publish-details
  .main
  .container
  .right-publisher
  .download-section
  .app-qr-code
  .download-info
  .name {
  color: #389eac;
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
}
.publish-details
  .main
  .container
  .right-publisher
  .download-section
  .app-qr-code
  .download-info
  .app-text {
  color: #333333;
  font-size: 12px;
  margin-top: 10px;
  font-weight: 700;
}
.publish-details
  .main
  .container
  .right-publisher
  .download-section
  .app-qr-code
  .app-download-qr-code
  img {
  width: 99px;
  height: 99px;
}
.publish-details .main .container .right-publisher .books-tag {
  margin-bottom: 30px;
}
.publish-details .main .container .right-publisher .books-tag h3 {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}
.publish-details .main .container .right-publisher .books-tag button {
  border: none;
  color: #ffffff;
  font-size: 12px;
  background-color: #389eac;
  border-radius: 40px;
  margin: 0 7px 6px 0;
  padding: 6px 10px;
}
.publish-details .main .container .right-publisher .books-tag button:hover{
  content: "";
  /* position: absolute; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #408993;
}
.publish-details .main .container .right-publisher .reader-dynamic h3 {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}
.publish-details
  .main
  .container
  .right-publisher
  .reader-dynamic
  .reader-action{
      padding: 0 0 20px;
  }
.publish-details
  .main
  .container
  .right-publisher
  .reader-dynamic
  .reader-action
  .image
  img {
  width: 48px;
  height: 48px;
}
.publish-details
  .main
  .container
  .right-publisher
  .reader-dynamic
  .reader-action
  .action {
    margin-left: 10px;
    overflow: hidden;
    width: 185px;
    vertical-align: top;
    font-size: 12px;
}
.publish-details
  .main
  .container
  .right-publisher
  .reader-dynamic
  .reader-action
  .action a{
    text-decoration: none;
    color: #389eac;
  }
  .publish-details
  .main
  .container
  .right-publisher
  .reader-dynamic
  .reader-action
  .action .action-msg{
    color: #666666;
    margin: 7px 0 10px;
  }
/*# sourceMappingURL=publish-details.css.map */

</style>